import React from 'react'
import style from './style'
import Code from './Code'
import DnD from '../ui-components/dnd'
import styleDnD from './style.dnd'

@DnD()
class List extends React.Component {
	state = {
		data: [
			{
				name: 'this is A line'
			},
			{
				name: 'this is B line'
			},
			{
				name: 'this is C line'
			},
			{
				name: 'this is D line'
			},
			{
				name: 'this is E line'
			}
		]
	}

	componentWillReceiveProps(props) {
		if (props.dragEnd && !this.props.dragEnd) {
			const { from, to } = props
			// 从上往下
			if (from < to) {
				this.setState({
					data: [
						...this.state.data.slice(0, from),
						...this.state.data[to],
						...this.state.data.slice(from+1, to+1),
						this.state.data[from],
						...this.state.data.slice(to+1)
					]
				})
			}
			// 从下往上
		 	else {
				this.setState({
					data: [
						...this.state.data.slice(0, to),
						this.state.data[from],
						...this.state.data.slice(to, from),
						...this.state.data.slice(from+1)
					]
				})
			}
		}
	}

	render() {
		return (
			<ul>
				{
					this.state.data.map((v, i) => <li draggable key={i}>{v.name}</li>)
				}
			</ul>
		)
	}
}

const list = (props) => {
	if (props.dragEnd) {
		const { from, to } = props
		props.handleSort({from, to})	
	}
	if (props.dragEnd) {
		console.log('sort')
	}
	return (
		<ul>
			{
				props.data.map((v, i) => <li draggable key={i}>{v.name}</li>)
			}
		</ul>
	)
} 

export default 
class Test extends React.Component {
	render() {
		return (
			<div className={style.root}>
				<Code>{''}</Code>
				<div className={styleDnD.root}>
					<List/>
				</div>
			</div>
		)
	}
}
